<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数增强-箭头函数原型补充</title>
  <!-- 
  箭头函数是 JavaScript ES6 引入的一种新语法，用于简化函数的定义。
  一、基本语法
  箭头函数使用  `=>`  符号来定义，语法形式如下：
  const functionName = (parameters) => {
      // 函数体
  };
   1. 单参数省略括号

  如果只有一个参数，可以省略括号：
  const square = x => x * x;
  console.log(square(5)); // 输出: 25
   2. 多参数和无参数

  如果有多个参数，必须使用括号：
  const add = (a, b) => a + b;
  console.log(add(2, 3)); // 输出: 5

  const greet = () => 'Hello, World!';
  console.log(greet()); // 输出: Hello, World!

  二、简化的函数体
  如果箭头函数的函数体只有一条语句，可以省略大括号和  `return`  关键字：
  const multiply = (a, b) => a * b;
  console.log(multiply(3, 4)); // 输出: 12
  
  三、 `this`  绑定
  箭头函数的一个重要特性是它不绑定自己的  `this` ，而是从外部上下文中继承  `this`  的值。这使得在某些情况下使用箭头函数更加方便，尤其是在回调函数中。
  function Person() {
      this.age = 0;

      setInterval(() => {
          this.age++; // 这里的 this 指向 Person 实例
          console.log(this.age);
      }, 1000);
  }

  const p = new Person(); // 每秒输出年龄，直到程序结束

  四、不能用作构造函数
  箭头函数不能用作构造函数，尝试使用  `new`  关键字调用箭头函数会抛出错误：
  const Foo = () => {};
  const bar = new Foo(); // TypeError: Foo is not a constructor
  五、没有  `arguments`  对象

  箭头函数没有自己的  `arguments`  对象，如果需要访问参数，可以使用剩余参数语法：
  const sum = (...args) => {
      return args.reduce((acc, curr) => acc + curr, 0);
  };

  console.log(sum(1, 2, 3, 4)); // 输出: 10
  六、适用场景
  箭头函数特别适合用于以下场景：
  1. 简化回调函数：在数组方法（如  `map` 、 `filter` 、 `reduce` ）中使用时，可以使代码更加简洁。
    const numbers = [1, 2, 3, 4];
    const doubled = numbers.map(n => n * 2);
    console.log(doubled); // 输出: [2, 4, 6, 8]
  2. 保持上下文：在需要保持  `this`  绑定的情况下（如在事件处理程序或定时器中），箭头函数尤为有用。

  总结
  - 箭头函数提供了一种简洁的函数定义方式，尤其适合用于回调函数。
  - 它们不绑定自己的  `this` 、 `arguments` ，不能用作构造函数。
  - 在使用箭头函数时，需要注意上下文的继承和参数的处理。
  -->
</head>
<body>

  <script>

    // 1. function定义函数是有两个原型的，但是箭头函数只有一个原型
    // function fn() {}
    // console.log(fn.prototype); // {constructor: ƒ}
    // new fn(); -> f.__proto__ = fn.prototype
    // console.log(fn.__proto__); // -> Function.prototype {constructor: ƒ Function(), __proto__: ƒ Object()}
    
    // 2. 箭头函数没有prototype显示原型
    const foo = () => {};
    console.log(foo.prototype); // undefined
    console.log(foo.__proto__); // -> Function.prototype {constructor: ƒ Function(), __proto__: ƒ Object()}
    console.log(foo.__proto__ === Function.prototype); // true
    // 在ES6之后, 定义一个类要使用class定义
    // var f = new foo() // Uncaught TypeError: foo is not a constructor
    // console.log(f);
    
  </script>
  
</body>
</html>